<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 700px;
            height: 800px;
        }
        .sky{
            width: 600px;
            background-color: pink;
            margin-right: 10px;
            height: 60px;
            /*float: left;*/
        }
        .img{
            width: 10px;
            height: 110px;
            float: left;
            margin: 10px -15px 10px 10px;
            /*【附加】：必须要有margin的赋值才能让紧挨着的标准流中的其他元素进入这浮动元素*/
        }
        strong{
            background-color: pink;
            /*【1】行内元素重叠的时候，边框、背景、内容全部进入。*/
        }
        h2{
            background-color: green;
            /*【2】块级元素重叠的时候，背景色浮动元素优先，但是文本内容块级元素优先。*/
        }
    </style>
</head>
<body>
<div class="father">
    <img class="img" src="../NUM6_Text_Attributes/cat.jpg" alt=""/>
    <p class="sky">
        2222this is a place will action what is float an with images
        2222this is a place will action
        <strong>2222this is a place will action what is float and with images</strong>
        this is a place will action what is float an with images
        this is a place will action what is float an with images
    </p>
    <h2>this is a headline and just look for it</h2>
    <div class="moon">
        负的外边距浮动后能超出元素
    </div>
</div>
</body>
</html>